<template>
	<view style=";background-color: #f1f1f1;margin-top: 50rpx;">
		<view class="user-center-wrapper" v-on:click="onTopLoginClick">
			<view class="user-center-wrapper" style="justify-content: start;">
				<view class="user-center-top-image-wrapper">
					<view class="swiper-item-category uni-bg-red">A</view>
				</view>
				<view style="width: 30rpx"></view>
				<view class="user-center-top-text-wrapper"> 
					<view >{{isLogin?this.user.mobile:"请登录"}}</view>
					<!-- <view class="user-center-top-riqi">18129290467</view> -->
				</view>
			</view>
			<!-- <view class="user-center-vip-button-wrapper"
				style="display: flex;flex-direction: column;justify-content: center">
				<view class="user-center-vip-button-red-wrapper">
					<view class="user-center-vip-button-text" style="">VIP</view>
				</view>

			</view> -->
		</view>
		<view style="background-color: white;padding:15rpx;border-radius: 15rpx; ;display: flex;justify-content: space-between;margin: 30rpx;margin-top: 100rpx;">
			<view v-on:click="onOrderClick(1)">
				<view class="user-center-order-card-image-wrapper">
					<view class="swiper-item-category uni-bg-red">A</view>
				</view>
				<view class="user-center-order-card-text" >已完成订单</view>
			</view>
			<view v-on:click="onOrderClick(1)">
				<view class="user-center-order-card-image-wrapper">
					<view class="swiper-item-category uni-bg-red">A</view>
				</view>
				<view class="user-center-order-card-text">待支付</view>
			</view>
			<view v-on:click="onOrderClick(1)">
				<view class="user-center-order-card-image-wrapper">
					<view class="swiper-item-category uni-bg-red">A</view>
				</view>
				<view class="user-center-order-card-text">已购买</view>
			</view>
			<view v-on:click="onOrderClick(1)">
				<view class="user-center-order-card-image-wrapper">
					<view class="swiper-item-category uni-bg-red">A</view>
				</view>
				<view class="user-center-order-card-text">已取消</view>
			</view>
		</view>
		
		<view style="display: flex;justify-content: space-between;margin: 30rpx;background-color: white;padding: 10rpx;border-radius: 15rpx;height: 80rpx;align-items: center;">
			<view style="display: flex;align-items: center;">
				<uni-icons type="shop" size="60rpx"></uni-icons>
				<view style="padding-left: 10rpx;">关于</view>
			</view>
			<uni-icons type="forward" size="30rpx"></uni-icons>
		</view>
		<view style="display: flex;justify-content: space-between;margin: 30rpx;background-color: white;padding: 10rpx;border-radius: 15rpx;height: 80rpx;align-items: center;">
			<view style="display: flex;align-items: center;">
				<uni-icons type="shop" size="60rpx"></uni-icons>
				<view style="padding-left: 10rpx;">版本</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view>1.0.0</view>
				<uni-icons type="forward" size="30rpx"></uni-icons>
			</view>
			
		</view>
	</view>
</template>

<script>
	import request  from '@/utils/myrequest';
	export default {
		data() {
			return {
				user:null,
				isLogin:false,
			}
		}, 
		onShow() {
			request({
				url: '/api/auth/me',
				method: 'GET',
				success: (res) => {
					if (res?.status == 200) {
						this.isLogin = true;
						this.user = res.data;
					} else {
						this.isLogin = false;
						this.user = null;
					} 
				}
			});
		},
		methods: {
			onTopLoginClick(){
				if(this.isLogin==false){
					uni.navigateTo({
						url: '/pages/user/login/login'
					});
				}
			},
			onOrderClick(){
				uni.navigateTo({
					url: '/pages/order_list/order_list'
				});
			}
		}
	}
</script>

<style>
	page{
		width:100%;
		height:100%;
		background-color:#f1f1f1;
	}
	.swiper-item-category {
		display: block;
		height: 100rpx;
		width: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 100rpx;
	}

	.uni-bg-red {
		background-color: red;
	}

	.user-center-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 30rpx 0rpx 30rpx;
	}

	.user-center-top-tag-wrapper {}

	.user-center-top-riqi {
		color: #8f939c;
		font-size: 10px;
	}

	.user-center-top-loc {
		color: #8f939c;
		font-size: 10px;
	}

	.user-center-vip-button-wrapper {}

	.user-center-vip-button-red-wrapper {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: red;
		border-radius: 50rpx;
		text-align: center;
	}

	.user-center-vip-button-text {
		font-size: 25rpx;
		color: white;
	}
	.user-center-order-card-image-wrapper{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 30rpx 0rpx 30rpx;
		
	}
	.user-center-order-card-text{
		font-size: 25rpx;
		align-items: center;
		text-align: center;
	}
</style>